<template>
  <div>
    <span>我是疯狂子组件：</span>
    <el-input
      style="width: 200px; margin-right: 10px"
      v-model="crazyMsg"
      clearable
      placeholder="疯狂给父组件传值❗️"
    ></el-input>
    <hr />
    <span>我是子组件：</span>
    <el-input
      style="width: 200px; margin-right: 10px"
      v-model="localMsg"
      clearable
      placeholder="请输入给父组件的内容"
    ></el-input>
    <el-button type="warning" @click="sendData">给父组件传值</el-button>
  </div>
</template>

<script>
// import { EventBus } from '../main';
export default {
  name: 'childCom',
  props: {
    msg: { type: String, default: '' },
  },
  data () {
    return {
      localMsg: '',
      crazyMsg: '' // 新增用于疯狂子组件的输入框
    }
  },
  watch: {
    msg (newVal) {
      this.localMsg = newVal
    },
    // 监听crazyMsg的变化
    crazyMsg () {
      this.$emit('sendCrazyChild', this.crazyMsg)
    }
  },
  created() {
    this.$bus.$on('data-to-child-b', this.receiveData);
  },
  mounted () {
    this.localMsg = this.msg
    console.log(this.msg)
  },
  methods: {
    sendData () {
      this.$emit('sendChild', this.localMsg)
    },
    receiveData(data) {
      this.localMsg = data;
    }
  },
  beforeDestroy() {
    this.$bus.$off('data-to-child-b', this.receiveData);
  }
}
</script>

<style>
div {
  margin: 0 0 10px 0;
}
</style>
